<script setup lang="ts">
import { ref } from "vue";
import SCTable from "../packages/table/index";

const data = ref([
  {
    name: "张三",
    city: "成都",
    age: "年龄",
    id: "zs",
    sr: "1993-09",
    sfz: "1231312323132312313131",
    phone: "17789090099",
  },
  {
    name: "李四",
    city: "成都",
    age: "年龄",
    id: "ls",
    sr: "1993-09",
    sfz: "1231312323132312313131",
    phone: "17789090099",
  },
  {
    name: "李四",
    city: "成都",
    age: "年龄",
    id: "ls",
    sr: "1993-09",
    sfz: "1231312323132312313131",
    phone: "17789090099",
  },
  {
    name: "李四",
    city: "成都",
    age: "年龄",
    id: "ls",
    sr: "1993-09",
    sfz: "1231312323132312313131",
    phone: "17789090099",
  },
  {
    name: "李四",
    city: "成都",
    age: "年龄",
    id: "ls",
    sr: "1993-09",
    sfz: "1231312323132312313131",
    phone: "17789090099",
  },
  {
    name: "李四",
    city: "成都",
    age: "年龄",
    id: "ls",
    sr: "1993-09",
    sfz: "1231312323132312313131",
    phone: "17789090099",
  },
  {
    name: "李四",
    city: "成都",
    age: "年龄",
    id: "ls",
    sr: "1993-09",
    sfz: "1231312323132312313131",
    phone: "17789090099",
  },
  {
    name: "李四",
    city: "成都",
    age: "年龄",
    id: "ls",
    sr: "1993-09",
    sfz: "1231312323132312313131",
    phone: "17789090099",
  },
  {
    name: "李四",
    city: "成都",
    age: "年龄",
    id: "ls",
    sr: "1993-09",
    sfz: "1231312323132312313131",
    phone: "17789090099",
  },
  {
    name: "李四",
    city: "成都",
    age: "年龄",
    id: "ls",
    sr: "1993-09",
    sfz: "1231312323132312313131",
    phone: "17789090099",
  },
]);

const columns = ref([
  {
    title: "姓名",
    field: "name",
    width: "280px",
    color: "red",
    fixed: "left",
  },
  {
    title: "年龄",
    field: "age",
    width: "280px",
  },
  {
    title: "城市",
    field: "city",
    width: "280px",
  },
  {
    title: "生日",
    field: "sr",
  },
  {
    title: "身份证",
    field: "sfz",
  },
  {
    title: "电话号码",
    field: "phone",
  },
  {
    title: "操作",
    field: "action",
    fixed: "right",
    width: "120px",
  },
]);

const onButton = (rows: Record<string, any>) => {
  console.log("按钮显示", rows);
};
</script>

<template>
  <SCTable :data="data" :columns="columns" align="center" :ellipsis="true" :height="300">
    <template v-slot:action="props">
      <button @click="onButton(props)">按钮</button>
    </template>
  </SCTable>
</template>

<style></style>
